<template>
	<view id="maskTouchend" class="navigationbar" :class="{'sticky-tion':stickytion}" :style="{'--sticky-size': stickySize}">
		<view v-if="!slotName" class="navber-head" :style="{'--color-head': navberColor,'--padding-head': navberpadding,'--color-text':navtextColor,'--opacity-head': opacity}">
			<!-- 左边 -->
			<view class="head-left">
				<view class="fixed-width fixed-width-left" @click.stop="ClickMovable">
					<uni-icons type="back" size="18" :color="navtextColor" v-if="leftIcon"></uni-icons>
					<view v-if="leftText">{{leftText}}</view>
				</view>
			</view>
			<view class="head-center" @touchend="maskTouchend">
				<view class="fixed-width-center">
					<view v-if="centerText" class="">{{centerText}}</view>
				</view>
			</view>
			<view class="head-rigth">
				<view class="fixed-width fixed-width-rigth">
					<uni-icons  v-if="rightIcon" type="contact" size="18"></uni-icons>
				</view>
			</view>
			<!-- 中间边 -->
			<!-- 右边 -->
		</view>
		<slot name="slotName"></slot>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				touchNum: 0,
			}
		},
		created() {
		},
		methods: {
			ClickMovable() {
				if(this.navigator) {
					this.$emit('emitNavigator')
					return
				}
				var pages = getCurrentPages();
				if(pages.length <= 1) {
					uni.switchTab({
						url: '/pages/index/index'
					})
					return
				}
				uni.navigateBack({
					delta: 1
				})
			},
			// 双击顶置
			maskTouchend() {
				this.touchNum ++
				setTimeout(()=>{
					if(this.touchNum == 1){
						console.log('单击')
					}
					if(this.touchNum >= 2){
						console.log('双击')
						this.navStyleSroll()
					}
					this.touchNum = 0
				},250)
			},
			navStyleSroll() {
				uni.createSelectorQuery().in(this).select('#maskTouchend').boundingClientRect(data=>{//目标位置的节点：类或者id
					uni.pageScrollTo({
						duration: 100,//过渡时间
						scrollTop: data.top - 24 ,//到达距离顶部的top值
					})
				}).exec();
			}
		},
		props: {
			// 展示自定义模板
			slotName: {
				type: Boolean,
				default: false
			},
			// 背景色
			navberColor: {
				type: String,
				default: '#b5001e'
			},
			// 背景颜色透明图
			opacity: {
				type: String,
				default: '1'
			},
			// 文字颜色
			navtextColor: {
				type: String,
				default: '#fff'
			},
			// 内边距 这样的形式不能是rpx,其他的单位才可以如 px、em,vh
			navberpadding: {
				type: String,
				default: '5px 2px'
			},
			// 是否吸顶 默认吸顶
			stickytion: {
				type: Boolean,
				default: true
			},
			// 吸顶距离 这样的形式不能是rpx,其他的单位才可以如 px、em,vh
			stickySize: {
				type: String,
				default: () => {
					// #ifdef H5
					return '0px'
					// #endif
					// #ifndef H5
					return getApp().globalData.systemMain.top + 'px' || 45 + 'px'
					// #endif
				}
			},
			// 是否展示左边图标
			leftIcon: {
				type: Boolean,
				default: true
			},
			// 左边文字信息
			leftText: {
				type: String,
				default: ''
			},
			// 是否展示右边图标
			rightIcon: {
				type: Boolean,
				default: false
			},
			// 中间边文字信息
			centerText: {
				type: String,
				default: ''
			},
			// 是否自定义返回
			navigator: {
				type: Boolean,
				default: false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navigationbar {
		.navber-head {
			// position: relative;
			background-color: var(--color-head);
			padding: var(--padding-head);
			color: var(--color-text);
			opacity: var(--opacity-head);
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
			.head-left {
				width: 30%;
			}
			.head-center {
				width: 40%;
				text-align: center;
			}
			.head-rigth {
				width: 30%;
			}
			.fixed-width {
				display: flex;
				align-items: center;
				font-size: 17px;
			}
			.fixed-width-rigth {
				justify-content: flex-end;
			}
		}
	}
	.sticky-tion {
		position: sticky;
		top: var(--sticky-size);
		z-index: 1000;
	}
</style>